<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
        需求分析
        设计分析
        代码层面分析
        角色：小鸟，管道，背景，地面，柱子
        功能：小鸟上下运动，柱子高度在变化 柱子移动循环移动 
                碰撞判断  得分判断  游戏难度判断
        使用技术：面向对象  canvas绘图  定时器
        游戏逻辑：1.定时器函数中不断绘制游戏角色
                 2.更新位置
                 3.判断 游戏是否结束
                 4.得分
        
    -->
    <style>
        body{
            text-align: center
        }
        #c1{
            background: pink
        }
        
    </style>
</head>
<body onload='init()'>
    <canvas width="400" height="600" id="c1"></canvas>
</body>
<script>
    //游戏相关数据尽量使用全局变量
    var ctx;
    var time;   //定时器关闭 游戏结束
    var dis=150;
    var g=4;    //小鸟下落速度
    var speed=40;  //管道速度
    var brid_index=0;
    var score=0;
    var bg=new Background(0,0,400,600,'images/bg.png');
    var ground=new Background(0,550,400,200,'images/ground.png');
    var up=new Up_pipe(0,0,100,200,'./images/pipe.png');
    var flag=false;
    // y=upheight+空隙高度
    var down=new Down_pipe(0,350,100,200,'./images/pipe.png');
    var birds_src=['./images/0.gif','./images/1.gif','./images/2.gif']
    var bird= new Brid(100,300,40,40,birds_src);


    //小鸟构造函数   对象作用把自己绘制到画布上
    function Brid(x,y,width,height,imgs_src){
        this.bx=x;
        this.by=y;
        this.bwidth=width;
        this.bheight=height;
        var image=new Image();
        this.img=image;
        //把自己画到画布上的功能函数
        this.drawb=function(){
            brid_index++;
            image.src=imgs_src[brid_index%3];
            ctx.drawImage(this.img,this.bx,this.by,this.bwidth,this.bheight)
        }
    }
    //背景构造函数   对象作用把自己绘制到画布上
    function Background(x,y,width,height,img_src){
        this.bgx=x;
        this.bgy=y;
        this.bgwidth=width;
        this.bgheight=height;
        var image=new Image();
        image.src=img_src;
        this.img=image;
        //把自己画到画布上的功能函数
        this.drawbg=function(){
            ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight)
        }
    }
    //  上管道的构造函数 对象作用把自己绘制到画布上
    function Up_pipe(x,y,width,height,img_src){
        this.upx=x;
        this.upy=y;
        this.upwidth=width;
        this.upheight=height;
        var image=new Image();
        var score=0;
        image.src=img_src;
        this.img=image;
        //把自己画到画布上的功能函数
        this.drawup=function(){
            ctx.drawImage(this.img,150,500,150,800,this.upx,this.upy,this.upwidth,this.upheight)
        }
    }
     //  下管道的构造函数 对象作用把自己绘制到画布上
    function Down_pipe(x,y,width,height,img_src){
        this.downx=x;
        this.downy=y;
        this.downwidth=width;
        this.downheight=height;
        var image=new Image();
        image.src=img_src;
        this.img=image;
        //把自己画到画布上的功能函数
        this.drawdown=function(){
            ctx.drawImage(this.img,0,450,150,800,this.downx,this.downy,this.downwidth,this.downheight)
        }
    }

    function keyup(e){
        console.log(11)
        if(e.keyCode==32){
            bird.by-=50;
        }
    }
    function judge(){
        //判断小鸟碰撞
        console.log(bird.by)
        if(bird.by>=510){
            clearInterval(time)
        }
        if((bird.bx+bird.bwidth>up.upx)&&(bird.bx+bird.bwidth<up.upx+up.upwidth+bird.bwidth)){
            if(bird.by<up.upheight){
                clearInterval(time)
            }
            if(bird.by+bird.bwidth>down.downy){
                clearInterval(time)
            }
        }
        document.onkeyup=keyup;
        //修改角色属性
        bird.by+=g
        //管道
        
        if(up.upx+up.upwidth>0){
            up.upx-=speed;
            down.downx-=speed;
        }else{
            flag=true
            up.upx=400;
            down.downx=400;
            //高度发生变化
            //管道高度 100-300
            //空隙  150
            //区域  550
            up.upheight=Math.random()*200+100;
            //修改下管道的位置
            down.downy=up.upheight+dis;
            down.downheight=550-up.upheight-dis;
        }
        //得分
        if(bird.bx>=up.upx+up.upwidth&&flag==true){
            score++;
            flag=false;
        }
        ctx.fillStyle="rgb(255,255,255)";
        ctx.font='30px Accent';
        ctx.fillText(score,200,100);


    }


    function drawall(){
        //清空画布
        ctx.clearRect(0,0,400,600);
        //绘制 所有有序角色  注意层级
        bg.drawbg();
        ground.drawbg();
        up.drawup();
        down.drawdown();
        bird.drawb();
        //判断游戏结束  碰撞判断
        judge();


    }


    function init(){
        ctx=document.getElementById('c1').getContext('2d');
        //玩家控制


        //开启定时器
        drawall()
        time=setInterval(drawall,100);
    }
    
</script>
</html>